<template>
  <page-header-wrapper :title="false">
    <a-card title="业务领取">
      <div>
        今日新增 <a>{{todayCount}}</a> 条
        <a-divider type="vertical" />
        剩余 <a>{{totalCount}}</a> 条
        <a-divider type="vertical" />
        <a-button type="default" style="margin-right:5px" @click="$refs.table.refresh(true)">刷新</a-button>
        <a-button :loading="loading" :disabled="totalCount == 0" type="primary" style="margin-right:5px" @click="allReceived">全部领取</a-button>
        <a-button :disabled="selectedRowKeys.length == 0" type="danger" @click="batchReceived">批量领取</a-button>
      </div>
      <a-divider />
      <div class="table-operator">
        <s-table
          bordered
          ref="table"
          size="middle"
          :row-key="(record) => record.cb_id"
          :columns="businessColumns"
          :data="businessData"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >
          <template slot="xu" slot-scope="text,record,index">
            {{index + 1}}
          </template>
          <template slot="adviser" slot-scope="text, record">
            <a-tag>{{text}}</a-tag><br>
            <a-tag>{{record.group_type}}组</a-tag><br>
            <a-tag>{{record.leader}}</a-tag>
          </template>
          <template slot="contract_no" slot-scope="text,record">
            <a-button size="small" type="link" @click="onContract(record.contract_no)">{{text}}</a-button>
          </template>
          <template slot="official_fee" slot-scope="text, record">
            <a-tag color="red">官费：{{text}}</a-tag><br>
            <a-tag color="red">价格：{{record.price}}</a-tag><br>
            <a-tag color="red">代理费：{{record.agency_fee}}</a-tag>
          </template>
          <template slot="action" slot-scope="text, record">
            <a-button style="margin-right:5px" size="small" type="primary" @click="onReceived(record.cb_id)">领取</a-button>
          </template>
        </s-table>
      </div>
    </a-card>
    <a-modal
      title="合同详情"
      v-model="visible"
      :width="1000"
      :footer="null"
    >
      <a-table
        bordered
        size="middle"
        :row-key="(record) => record.cb_id"
        :columns="businessColumns2"
        :data-source="contractBusiness"
        :pagination="pagination"
      >
        <template slot="title">
          合同编号：
          <a-button
            size="small"
            type="link"
            icon="copy"
            class="copy"
            :data-clipboard-text="modalOpts.contract_no"
            @click="copy"
          >
            {{modalOpts.contract_no}}
          </a-button>
        </template>
        <template slot="footer">
          <div style="text-align: right">
            <a-button :loading="loading" size="small" type="danger" @click="allReceivedByContract(modalOpts.contract_no)">全部领取</a-button>
          </div>
        </template>
        <template slot="xu" slot-scope="text,record,index">
          {{index + 1}}
        </template>
        <template slot="business_no" slot-scope="text">
          <a-button
            class="copy"
            type="link"
            icon="copy"
            :data-clipboard-text="text"
            @click="copy"
          >
            {{text}}
          </a-button>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button style="margin-right:5px" size="small" type="primary" @click="onReceived(record.cb_id)">领取</a-button>
        </template>
      </a-table>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import Clipboard from 'clipboard'
import { STable } from '@/components'
import businessColumns from '@/columns/patent.process'
import { getPatentData, getReceive } from '@/api/patent.process'

export default {
  components: {
    STable
  },
  name: 'BusinessReceive',
  data () {
    return {
      businessColumns: businessColumns.receive,
      businessData: parameters => {
        return getPatentData(Object.assign(parameters, this.queryParam)).then(res => {
          this.todayCount = res.result.today_unclaimed_count
          this.totalCount = res.result.total_unclaimed_count
          return res.result
        })
      },
      businessColumns2: businessColumns.receive2,
      contractBusiness: [],
      pagination: {

      },
      todayCount: '0',
      totalCount: '0',
      queryParam: {},
      selectedRowKeys: [],
      editVisible: false,
      processVisible: false,
      processOpts: {},
      processForm: {},
      loading: false,
      modalOpts: {},
      visible: false
    }
  },
  methods: {
    onContract (no) {
      const app = this
      const params = {}
      app.modalOpts = {}
      app.modalOpts['contract_no'] = no
      params['contract_no'] = no
      params['page_size'] = 10
      getPatentData(params).then(res => {
        this.contractBusiness = res.result.data
        this.visible = true
      })
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    onReceived (id) {
      const app = this
      const data = {}
      const arr = []
      arr[0] = id
      data['cb_ids'] = arr
      app.$confirm({
        title: '是否确认领取此条业务',
        onOk: () => {
          getReceive(data).then(res => {
            if (res.status === 0) {
              app.$refs.table.refresh()
            } else {
              app.$warning({
                title: res.msg
              })
              return false
            }
          })
        }
      })
    },
    batchReceived () {
      const app = this
      const data = {}
      data['cb_ids'] = app.selectedRowKeys
      app.$confirm({
        title: '是否确认领取所选择的业务',
        onOk: () => {
          getReceive(data).then(res => {
            if (res.status === 0) {
              app.$refs.table.refresh(true)
            } else {
              app.$warning({
                title: res.msg
              })
              return false
            }
          })
        }
      })
    },
    allReceived () {
      const app = this
      const data = {}
      app.$confirm({
        title: '是否确认领取全部业务',
        onOk: () => {
          app.loading = true
          getReceive(data).then(res => {
            if (res.status === 0) {
              app.$refs.table.refresh(true)
              app.loading = false
            } else {
              app.$warning({
                title: res.msg
              })
              return false
            }
          })
        }
      })
    },
    allReceivedByContract (no) {
      const app = this
      const data = {}
      app.$confirm({
        title: '是否领取' + no + '下的全部业务',
        onOk: () => {
          app.loading = true
          data['type'] = 'yes'
          data['contract_no'] = no
          getReceive(data).then(res => {
            if (res.status === 0) {
              app.visible = false
              app.$refs.table.refresh(true)
            } else {
              app.$warning({
                title: res.msg
              })
            }
          }).finally(() => {
            app.loading = false
          })
        }
      })
    },
    copy (e) {
      const clipboard = new Clipboard('.copy')
      clipboard.on('success', e => {
        this.$message.success('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$message.error('复制失败')
        clipboard.destroy()
      })
    }
  }
}
</script>

<style scoped>

</style>
